import {Checkbox, Input} from "antd";
import React from "react";

type product ={
    category: string,
    price: string,
    stocked: boolean,
    name: string
}

const SearchBar = () => {
    return (
        <>
            <Input style={{display: 'block', width: 500, margin: 'auto'}} placeholder='Search...'/>
            <Checkbox> Only show products in stock</Checkbox>
        </>
    )
}

interface ProductTableProps {
    products: Array<product>
}
const ProductTable = (props: ProductTableProps) => {
    const {products} = props
    const rows:Array<any> = []
   let lastCategory:any = null
    products.forEach((item) => {
        if(item.category !== lastCategory) {
            rows.push(<ProductCategoryRow category={item.category}></ProductCategoryRow>)
        }
        rows.push(<ProductRow product={item} key={item.name}></ProductRow>)
        lastCategory = item.category

    })
    return (
        <>
            <table>
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Price</th>
                </tr>
                </thead>
                <tbody>
                {rows}
                </tbody>
            </table>
        </>
    )
}
type productCateRowProps= {
    category:string
}
const ProductCategoryRow = (props:productCateRowProps) => {
    const {category} = props
    return (
        <tr>
            <th>
                {category}
            </th>
        </tr>
    )
}

type productRowProps= {
    product:product,
    key:string
}
const ProductRow = (prop:productRowProps) => {
 const {product} = prop
    return (
        <tr>
            <td>{product.name}</td>
            <td>{product.price}</td>
        </tr>
    )
}

interface FilterableProductTableProps {
    products: Array<product>
}

const FilterableProductTable = (props: FilterableProductTableProps) => {
    const {products} = props
    return (
        <>
            <SearchBar></SearchBar>
            <ProductTable products={products}></ProductTable>
        </>

    )
}
export default FilterableProductTable